{% extends 'base.html' %}
{% load static %}

{% block title %}后台管理 - AI故事生成系统{% endblock %}

{% block extra_css %}
<style>
    :root {
        --admin-primary: #2196F3;         /* 蓝色主色 */
        --admin-primary-light: #64B5F6;   /* 浅蓝色 */
        --admin-primary-dark: #1976D2;    /* 深蓝色 */
        --admin-accent: #BBDEFB;          /* 浅蓝强调色 */
        --admin-text-light: #E3F2FD;      /* 超浅蓝文本 */
        --admin-sidebar-bg: #f5f9ff;      /* 浅蓝色侧边栏背景 */
        --admin-sidebar-hover: #E3F2FD;   /* 浅蓝侧边栏悬停 */
        --admin-success: #66bb6a;         /* 成功颜色 */
        --admin-danger: #ef5350;          /* 危险颜色 */
        --admin-warning: #ffb74d;         /* 警告颜色 */
        --admin-info: #4fc3f7;            /* 信息颜色 */
    }
    
    body {
        background-color: #fafcff;
    }

    .admin-sidebar {
        background-color: var(--admin-sidebar-bg);
        color: #424242;
        min-height: calc(100vh - 56px);
        box-shadow: 1px 0 5px rgba(0,0,0,0.05);
        z-index: 100;
    }
    
    .list-group-item {
        background-color: transparent;
        border: none;
        border-radius: 0;
        color: #616161;
        padding: 12px 20px;
        transition: all 0.3s;
        border-left: 3px solid transparent;
    }
    
    .list-group-item:hover {
        background-color: var(--admin-sidebar-hover);
        color: var(--admin-primary-dark);
        border-left: 3px solid var(--admin-primary);
    }
    
    .list-group-item.active {
        background-color: var(--admin-accent);
        color: var(--admin-primary-dark);
        border-left: 3px solid var(--admin-primary);
        font-weight: 600;
    }
    
    .admin-content {
        padding: 20px;
        background-color: #fafafa;
    }
    
    .admin-card {
        border: none;
        box-shadow: 0 0 20px rgba(0,0,0,0.03);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
    }
    
    .admin-card .card-header {
        background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-light));
        border: none;
        padding: 15px 20px;
    }
    
    .admin-card .card-body {
        padding: 25px;
    }
    
    .admin-brand {
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        margin-bottom: 10px;
        background-color: var(--admin-primary);
    }
    
    .admin-brand h4 {
        color: white;
        margin: 0;
    }
    
    .badge {
        padding: 6px 10px;
    }
    
    .badge.bg-danger {
        background-color: var(--admin-danger) !important;
    }
    
    .badge.bg-warning {
        background-color: var(--admin-warning) !important;
    }
    
    .badge.bg-success {
        background-color: var(--admin-success) !important;
    }
    
    .badge.bg-info {
        background-color: var(--admin-info) !important;
    }
    
    .badge.bg-primary {
        background-color: var(--admin-primary) !important;
    }
    
    /* 自定义滚动条 */
    .admin-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .admin-sidebar::-webkit-scrollbar-track {
        background: var(--admin-sidebar-bg);
    }
    
    .admin-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--admin-primary-light);
        border-radius: 6px;
    }
    
    /* 按钮和表单元素样式自定义 */
    .btn-primary {
        background-color: var(--admin-primary);
        border-color: var(--admin-primary);
    }
    
    .btn-primary:hover {
        background-color: var(--admin-primary-light);
        border-color: var(--admin-primary-light);
    }
    
    .page-link {
        color: var(--admin-primary);
    }
    
    .page-item.active .page-link {
        background-color: var(--admin-primary);
        border-color: var(--admin-primary);
    }
    
    .form-control:focus, 
    .form-select:focus {
        border-color: var(--admin-primary-light);
        box-shadow: 0 0 0 0.25rem rgba(38, 166, 154, 0.25);
    }
    
    /* 侧边栏分类标题 */
    .sidebar-category {
        padding: 12px 20px;
        color: #757575;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .sidebar-category i {
        color: var(--admin-primary);
    }
    
    /* 重置子链接样式 */
    .sidebar-sublink {
        padding-left: 35px !important;
        font-size: 0.95rem;
    }
    
    /* 导航条和面包屑 */
    .admin-navbar {
        background-color: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        padding: 0.5rem 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    
    .admin-breadcrumb {
        margin-bottom: 0;
        background: transparent;
    }
    
    .admin-breadcrumb .breadcrumb-item a {
        color: var(--admin-primary);
        text-decoration: none;
    }
    
    .admin-breadcrumb .breadcrumb-item.active {
        color: #616161;
    }
    
    /* 用户下拉菜单 */
    .admin-user-dropdown .dropdown-toggle {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #616161;
    }
    
    .admin-user-dropdown .dropdown-toggle:after {
        display: none;
    }
    
    .admin-user-dropdown .dropdown-menu {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .admin-user-dropdown .dropdown-item {
        padding: 0.5rem 1rem;
        color: #616161;
    }
    
    .admin-user-dropdown .dropdown-item:hover {
        background-color: var(--admin-accent);
        color: var(--admin-primary-dark);
    }
    
    .admin-user-dropdown .dropdown-item i {
        margin-right: 0.5rem;
        color: var(--admin-primary);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid p-0">
    <div class="row g-0">
        <!-- 侧边栏导航 -->
        <div class="col-md-3 col-lg-2 admin-sidebar">
            <div class="admin-brand">
                <h4><i class="bi bi-gear-fill me-2"></i>管理后台</h4>
            </div>
            
            <div class="list-group">
                <a href="{% url 'adminuser:dashboard' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
                    <i class="bi bi-speedometer2 me-2"></i> 仪表盘
                </a>
                <a href="{% url 'adminuser:user_management' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'user_management' %}active{% endif %}">
                    <i class="bi bi-people me-2"></i> 用户管理
                </a>
                <a href="{% url 'adminuser:story_management' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'story_management' %}active{% endif %}">
                    <i class="bi bi-book me-2"></i> 故事管理
                </a>
                <a href="{% url 'adminuser:report_management' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'report_management' %}active{% endif %}">
                    <i class="bi bi-flag me-2"></i> 举报管理
                    {% if pending_reports %}
                    <span class="badge bg-danger rounded-pill float-end">{{ pending_reports }}</span>
                    {% endif %}
                </a>
                <a href="{% url 'adminuser:comment_management' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'comment_management' %}active{% endif %}">
                    <i class="bi bi-chat-dots me-2"></i> 评论管理
                    {% if pending_comments %}
                    <span class="badge bg-warning rounded-pill float-end">{{ pending_comments }}</span>
                    {% endif %}
                </a>
                <a href="{% url 'adminuser:system_settings' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'system_settings' %}active{% endif %}">
                    <i class="bi bi-gear me-2"></i> 系统设置
                </a>
                <a href="{% url 'adminuser:admin_logs' %}" class="list-group-item list-group-item-action {% if request.resolver_match.url_name == 'admin_logs' %}active{% endif %}">
                    <i class="bi bi-list-check me-2"></i> 操作日志
                </a>
                
                <div class="sidebar-category">
                    <i class="bi bi-graph-up me-2"></i> 数据分析
                </div>
                <a href="{% url 'adminuser:data_analysis' %}" class="list-group-item list-group-item-action sidebar-sublink {% if request.resolver_match.url_name == 'data_analysis' %}active{% endif %}">
                    <i class="bi bi-pie-chart me-2"></i> 总览分析
                </a>
                <a href="{% url 'adminuser:user_analysis' %}" class="list-group-item list-group-item-action sidebar-sublink {% if request.resolver_match.url_name == 'user_analysis' %}active{% endif %}">
                    <i class="bi bi-people-fill me-2"></i> 用户分析
                </a>
                <a href="{% url 'adminuser:content_analysis' %}" class="list-group-item list-group-item-action sidebar-sublink {% if request.resolver_match.url_name == 'content_analysis' %}active{% endif %}">
                    <i class="bi bi-file-text me-2"></i> 内容分析
                </a>
                <a href="{% url 'adminuser:interaction_analysis' %}" class="list-group-item list-group-item-action sidebar-sublink {% if request.resolver_match.url_name == 'interaction_analysis' %}active{% endif %}">
                    <i class="bi bi-hand-thumbs-up me-2"></i> 互动分析
                </a>
                
                <div class="mt-3 text-center">
                    <a href="/" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-box-arrow-left me-2"></i> 返回前台
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="col-md-9 col-lg-10 admin-content">
            <!-- 顶部导航栏 -->
            <div class="admin-navbar d-flex justify-content-between align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb admin-breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'adminuser:dashboard' %}">后台管理</a></li>
                        <li class="breadcrumb-item active">{% block admin_breadcrumb_title %}{% block admin_title %}后台管理{% endblock %}{% endblock %}</li>
                    </ol>
                </nav>
                
                <!-- 用户信息和工具 -->
                <div class="admin-user-dropdown dropdown">
                    <a class="dropdown-toggle" href="#" role="button" id="adminUserDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="{% if request.user.profile.avatar %}{{ request.user.profile.avatar.url }}{% else %}{% static 'admin/img/tx.png' %}{% endif %}" width="32" height="32" class="rounded-circle me-2">
                        <span class="d-none d-md-inline-block">{{ request.user.username }}</span>
                        <i class="bi bi-chevron-down ms-2"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="adminUserDropdown">
                        <li><a class="dropdown-item" href="{% url 'user:user_profile' request.user.username %}"><i class="bi bi-person"></i> 我的个人资料</a></li>
                        <li><a class="dropdown-item" href="{% url 'adminuser:system_settings' %}"><i class="bi bi-gear"></i> 系统设置</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'user:logout' %}"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="card admin-card">
                <div class="card-header">
                    <h4 class="mb-0 text-white">{% block admin_card_title %}{{ block.super }}{% endblock %}</h4>
                </div>
                <div class="card-body">
                    {% block admin_content %}
                    <!-- 内容将被子模板替换 -->
                    {% endblock %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 